<template>
    <div v-clickOutSide="handleHideSelect">
        <a-dropdown :trigger="['click']" :visible="visible" :class="visible ? 'active' : ''" :getPopupContainer="(node) => node.parentNode">
            <flexbox class="ant-dropdown-link dropdown-wrap" @click="visible = !visible">
                <span class="title-cont"> 更多 </span>
                <DownOutlined style="margin-left: 4px" />
            </flexbox>
            <template #overlay>
                <div class="dropdown-body" v-empty="!isEmpty">
                    <div style="padding-bottom: 5px">
                        <a class="clear-text" v-if="!isEmpty" @click="handleClearAll">清除选择的内容</a>
                    </div>
                    <div style="max-height: 200px; overflow-y: auto">
                        <flexbox v-for="(item, index) of options" :key="item" :class="index === 0 ? '' : 'margin-t-8'">
                            <a-checkbox v-model:checked="item.checked" v-fitText @change="handleCheckChange">
                                {{ item.title }}
                            </a-checkbox>
                        </flexbox>
                    </div>
                </div>
            </template>
        </a-dropdown>
    </div>
</template>
<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        DownOutlined
    },
    props: {
        options: {
            type: Object,
            default: () => ({})
        },
        value: {
            type: Array,
            default: () => []
        }
    },
    emits: ['update:value', 'change'],
    setup(props, { emit }) {
        const state = reactive<any>({
            options: [],
            selectedKeys: [],
            visible: false,
            isEmpty: true
        });
        const handleCheckChange = () => {
            const arr = state.options.filter((item) => item.checked);
            state.selectedKeys = [...arr];
            emit('update:value', [...arr]);
            emit('change', [...arr]);
        };
        const handleClearAll = () => {
            state.selectedKeys = [];
            state.options = state.options.map((item) => ({
                ...item,
                checked: false
            }));
            emit('update:value', []);
            emit('change', []);
        };
        const handleHideSelect = () => {
            state.visible = false;
        };
        const init = () => {
            if (props.options && props.options.length) {
                state.options = props.options.map((item) => {
                    const checked = state.selectedKeys.length ? state.selectedKeys.some((elem) => elem.title === item.title) : false;
                    return { ...item, checked };
                });
            } else {
                state.options = [];
            }
            state.isEmpty = props.options ? !props.options.length : true;
        };
        watch(
            () => props.value,
            (n) => {
                state.selectedKeys = [...n];
                init();
            },
            {
                deep: true,
                immediate: true
            }
        );
        return {
            ...toRefs(state),
            handleCheckChange,
            handleClearAll,
            handleHideSelect
        };
    }
});
</script>
<style lang="less" scoped>
@import './styles/index.less';
</style>
